<template>
  <h1>App</h1>
  <!-- 读取pinia模块的state数据 -->
  <p>{{ counterStore.count }}</p>
  <!-- 读取pinia模块的getters数据 -->
  <p>{{ counterStore.oddOrEven }}</p>

  <button @click="update1">更新1</button>
  <button @click="update2">更新2</button>
  <button @click="update3">更新3</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
});
</script>

<script lang="ts" setup>
import { useCounterStore } from "./store/modules/counter";

// 得到pinia模块对象，里面包含所有内容，并且所有内容都进行了数据代理
const counterStore = useCounterStore();

const update1 = () => {
  // 调用action函数
  // 如果将来要更新数据，需要发送请求，就要定义action，并使用action更新
  counterStore.increment(1);
};

const update2 = () => {
  // 直接更新数据
  // 如果将来需要直接更新一个数据，不需要发送请求，就直接更新即可
  counterStore.count--;
};

const update3 = () => {
  // 直接更新多个数据
  // 如果将来需要直接更新多个数据，不需要发送请求，就直接更新即可
  counterStore.$patch({
    count: counterStore.count + 2,
    age: 22,
    name: "bob",
  });
};
</script>

<style></style>
